<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<title>角色中心</title>
<head th:replace="common/incHead :: incHead"></head>
<body class="ok-body-scroll console">
<div class="ok-body home">
    <div class="layui-row ">
        <div class="layui-col-md2">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="ok-card-body layui-form">
                        <select th:field="${sysSystem.id}" name="systemId" lay-filter="selectSystem" style="width:100%;">
                            <option th:each="item:${systems}" th:value="${item.id}" hassubinfo="true" th:text="${item.systemName}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card" layoutH="73">
                    <div class="layui-card-header">
                        <div class="ok-card-title">其它角色</div>
                    </div>
                    <div class="ok-card-body">
                        <ul class="folder-list" style="padding: 0">
                            <li th:each="item:${sysGroups}" class="p-xxs">
                                <a th:if="${sysGroup.id == item.id}" href="javascript:"><i class="layui-icon layui-icon-link"></i>
                                    <selection class="text-info">[[${item.groupSort}]]:[[${item.groupName}]]</selection>
                                </a>
                                <a th:if="${sysGroup.id != item.id}" th:href="@{/sys/user(sid=${sysSystem.id},gid=${item.id})}"><i class="layui-icon layui-icon-link"></i>
                                    <selection>[[${item.groupSort}]]:[[${item.groupName}]]</selection>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10 p-l-sm">
            <div th:if="${sid} != null and ${gid} != null" class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">
                        <div class="layui-btn-container p-t-xxs">
                            <button class="layui-btn layui-btn-sm layui-btn-warm" th:ljUrl="|/sys/user/add?gid=${gid}&sid=${sid}|" th:title="|添加角色用户:${sid}|" ljWidth="1000px" ljHeight="600px" target="ljOpenSubmit"><i
                                    class="layui-icon layui-icon-add-circle"></i>添加角色用户
                            </button>
                            <button class="layui-btn layui-btn-sm layui-btn-normal pull-right btnPageRefresh" lay-event="reload"><i class="layui-icon layui-icon-search"></i>刷新页面</button>
                        </div>
                    </div>
                </div>
                <div class="ok-card-body">
                    <div class="layui-row ljLayTableBox">
                        <table class="layui-hide" id="indexTable" lay-filter="indexTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/incBottom :: incBottom"></div>
<script type="text/javascript" src="/static/okadmin/lib/xmselect/xm-select.js"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    let oldSysId = [[${sysSystem.id}]];
    var indexData = [];
    /*[# th:each="item,itemStat:${records}"]*/
    indexData.push({
        id: [[${item.id}]],
        loginName: [[${item.loginName}]],
        userNick: [[${item.userNick}]],
        userPhone: [[${item.userPhone}]],
        userEmail: [[${item.userEmail}]],
        limitType: [[${item.limitType}]],
        dataStatus: [[${item.dataStatus}]],
        createTime: [[${@lj.date(item.createTime)}]]
    });
    /*[/]*/
    /*]]>*/
</script>
<script th:inline="none">
    layui.use(["element", "jquery", "table", "tree", "form", "okLayer", "okPapper", "okUtils"], function () {
        let table = layui.table;
        let okPapper = layui.okPapper;
        let okLayer = layui.okLayer;
        let tree = layui.tree;
        let form = layui.form;
        let $ = layui.jquery;
        let okUtils = layui.okUtils;
        let config = okUtils.local("okConfig", null) || okConfig || {};
        okLoading.close($);
        table.render({
            elem: '#indexTable',
            data: indexData,
            height: 'full-98',
            page: false,
            limit: indexData.length,
            toolbar: false,
            size: config.tableSize,
            cols: [[
                {field: "id", title: "编号", fixed: "left", width: 60},
                {field: "loginName", title: "登录账户", fixed: "left", width: 120},
                {field: "userNick", title: "用户昵称", width: 120},
                {field: "userPhone", title: "用户手机", width: 120},
                {field: "userEmail", title: "用户邮箱", minWidth: 150},
                {field: "limitType", title: "权限类型", width: 120, templet: "#limitTypeTpl"},
                {field: "createTime", title: "添加时间", width: 150},
                {title: "操作", minWidth: 440, align: "center", fixed: "right", templet: "#operationTpl"}
            ]],
            done: function (res, curr, count) {
            }
        });
        form.render();
        form.on('select(selectSystem)', function (data) {
            if (oldSysId != data.value) {
                window.location.href = "/sys/user?sid=" + data.value;
            }
        });
        // 权限操作
        $("[target='btnGroupLimit']").on("click", function () {
            let ljUrl = $(this).attr("ljUrl");
            let title = $(this).attr("title") || '';
            $.ajax({
                url: ljUrl, type: 'GET', cache: false, data: {}, timeout: 1000 * 20, success: function (data) {
                    okLayer.closeAll();
                    layer.open({
                        type: 1,
                        title: title,
                        shadeClose: false,
                        closeBtn: 1,
                        skin: "slideInRight ok-setting",
                        btn: ["确定", "取消"],
                        shade: [0.8, '#393D49'],
                        offset: 'r',
                        area: ["400px", '100%'],
                        content: data,
                        zIndex: layer.zIndex,
                        yes: function (index, layero) {
                            $(':focus').blur();
                            let layerForm = layero.find('.layui-form');
                            let layFilter = layerForm.attr('lay-filter');
                            let action = layerForm.attr('action');
                            let subFormData = form.val(layFilter);
                            subFormData.limits = okUtils.getTreeCheckId(tree.getChecked('userLimit'), "res");
                            $.ajax({
                                type: 'POST', url: action, data: subFormData, dataType: "json", cache: false, success: function (data) {
                                    layer.close(index);
                                    if (data.statusCode == '200') {
                                        okLayer.sweetSuccess("提交成功", data.message, function () {
                                            window.location.reload();
                                        });
                                    } else {
                                        okLayer.sweetError("提交失败", data.message);
                                    }
                                }, error: function (xhr) {
                                    okLayer.sweetError("请求数据异常:" + xhr.status, xhr.responseText);
                                    layer.close(index);
                                }
                            });
                        }
                    });
                }, error: function (xhr) {
                    okLayer.sweetError("请求页面异常:" + xhr.status, xhr.responseText);
                    return;
                }
            });
        });
        okPapper.init();
    })
</script>
<!-- 默认统一操作模板 -->
<script type="text/html" id="operationTpl">
    <button th:if="${@lj.limit('SysUserEdit') gt 0}" class="layui-btn layui-btn-xs" title="用户编辑:{{d.id}}" ljUrl="/sys/user/edit?id={{d.id}}" ljWidth="1000px" ljHeight="600px" target="ljOpenSubmit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button th:if="${@lj.limit('SysUserDetail') gt 0}" class="layui-btn layui-btn-xs layui-btn-normal" title="用户详情:{{d.id}}" ljUrl="/sys/user/detail?id={{d.id}}" ljWidth="1000px" target="ljOpenSubmit">
        <i class="layui-icon layui-icon-edit"></i>详情
    </button>
    <button th:if="${@lj.limit('SysUserDel') gt 0}" class="layui-btn layui-btn-xs layui-btn-danger" title="确认要删除该用户吗?" ljUrl="/sys/user/del?id={{d.id}}" target="ljAjaxTodo">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
    <button th:if="${@lj.limit('SysUserGoogle') gt 0}" class="layui-btn layui-btn-xs layui-btn-pink" title="谷歌验证码:{{d.id}}" ljUrl="/sys/user/google?id={{d.id}}" ljWidth="600px" ljHeight="600px" target="ljOpenSubmit">
        <i class="layui-icon layui-icon-delete"></i>谷歌码
    </button>
    <button th:if="${@lj.limit('SysUserPassreset') gt 0}" class="layui-btn layui-btn-xs layui-btn-warm" title="确认要重置该用户密码吗:{{d.id}}" ljUrl="/sys/user/passreset?id={{d.id}}" target="ljAjaxTodo">
        <i class="layui-icon layui-icon-delete"></i>密码
    </button>
    <button th:if="${@lj.limit('SysUserLimit') gt 0}" class="layui-btn layui-btn-xs layui-btn-checked" title="权限配置:{{d.id}}" ljUrl="/sys/user/limit?uid={{d.id}}" target="btnGroupLimit">
        <i class="layui-icon layui-icon-delete"></i>权限
    </button>
</script>
<!-- 资源名称层级关系 -->
<script type="text/html" id="limitTypeTpl" th:inline="none">
    {{#  if(d.limitType == 0){ }}
    <selection class="layui-font-green">组权限</selection>

    {{#  } else if(d.limitType == 1) { }}
    <selection class="layui-font-red">用户权限</selection>

    {{#  } }}
</script>
</body>
</html>